<template>
  <UserFormLayout class="signUp">
    <div slot="top" style="padding: 0;width:100%;">
      <h1 class="title">用户申请注册</h1>
      <div class="step">
        <SuccessStep style="margin-top: 20px;" v-if="stepIndex==3"/>
        <ApplyStep style="margin-top: 20px;" :stepIndex="stepIndex" @changeStep="changeStep" v-else/>
      </div>
    </div>
    <template #middle>
      <BaseInfo v-show="stepIndex===0" :baseInfo="baseInfo" ref="baseInfoRef"/>
      <CarBrandSelect v-show="stepIndex===1" :carBrandInfo="carBrandInfo" ref="CarBrandSelectRef"/>
      <SubmitApply v-show="stepIndex===2" :applyInfo="applyInfo" ref="submitApplyRef"/>
      <div class="success" v-if="stepIndex===3">
        <a-icon class="icon" type="check-circle" theme="filled"></a-icon>
        <h2 style="font-weight:bolder">提交成功</h2>
        <p>规划院OTA组工作人员将在1-3个工作日为您开通相关权限账号，</p>
        <p>届时将会邮件通知开通结果</p>
        <p>请保持企业微信，企业邮箱及电话畅通，谢谢</p>
      </div>
    </template>
    <template #bottomBtns>
      <a-button type="default" size="large" class="nextButton" @click="changeStep(stepIndex -1)" v-if="stepIndex <= 2 && stepIndex > 0">上一步</a-button>
      <a-button type="primary" size="large" class="nextButton" @click="changeStep(stepIndex +1)" v-if="stepIndex < 2">下一步</a-button>
      <a-button type="primary" size="large" class="nextButton" style="margin-right:0px" v-if="stepIndex===2" :loading="saving" @click="handleSubmit">提交申请</a-button>
    </template>
  </UserFormLayout>
</template>

<script>
import ApplyStep from '@/views/user/components/ApplyStep.vue'
import BaseInfo from '@/views/user/components/BaseInfo.vue';
import SubmitApply from '@/views/user/components/SubmitApply.vue';
import CarBrandSelect from '@/views/user/components/CarBrandSelect.vue';
import SuccessStep from './components/SuccessStep.vue';
import UserFormLayout from "@views/user/UserFormLayout";

export default {
  components: {
    ApplyStep,
    BaseInfo,
    SubmitApply,
    CarBrandSelect,
    UserFormLayout,
    SuccessStep
  },
  data(){
    return {
      saving:false,
      stepIndex:0,
      applyInfo:{
        candidates:[],
        note:undefined
      },
      carBrandInfo:{
        brands:[]
      },
      baseInfo:{
        basic:{}
      },
      canNext:false
    }
  },
  computed:{
    userInfo(){
      return this.$store.state.user.userInfo
    }
  },
  mounted(){
    this.$nextTick(()=>{
      this.baseInfo.basic=this.userInfo
      this.baseInfo.postTitle=this.userInfo.position
    })
  },
  methods:{
    changeStep(to){
      let refArr = ['baseInfoRef', 'CarBrandSelectRef', 'submitApplyRef'];
      let dataArr = ['baseInfo', 'carBrandInfo', 'applyInfo'];
      if (to === this.stepIndex) {
        return;
      }else if (this.stepIndex > to) {
        //回到前面步骤可直接执行
        this.stepIndex = to;
        return;
      }else if (to - this.stepIndex > 1) {
        //往后跳只能逐步跳
        return;
      }
      this.$refs[refArr[this.stepIndex]].getFormData().then((data) => {
        this[dataArr[this.stepIndex]] = {...data};
        this.stepIndex = to;
      }).catch((e) => {
        console.error(e)
      });
    },
    handleSubmit(){
      this.$refs.submitApplyRef.getFormData().then((data) => {
        this.applyInfo = {...data};
        const allData={
          step1:this.baseInfo,
          step2:this.carBrandInfo,
          step3:this.applyInfo
        }
        this.saving=true
        this.$api.register(allData).then(res=>{
          this.stepIndex++
        }).finally(()=>{
          this.saving=false
        })
        console.log('@@@@@@@@applyInfo',allData)
      }).catch((e) => {
        console.error(e)
      });
      
    }
  }
}
</script>

<style lang="less">
  #userLayout .box:has(.signUp) {
    padding-top: 50px !important;
    padding-bottom: 0 !important;
  }
</style>
<style lang="less" scoped>
  .title {
    left: 50%;
    top: 80px;
    width: 100%;
    height: 50px;
    line-height: 44px;
    color: rgba(250, 250, 250, 1);
    font-size: 30px;
    text-align: center;
  }

  /deep/ .middle {
    height: calc(100% - 204px) !important;
  }

  .step {
    width: 600px;
    height: 100px;
    margin: 0 auto 10px;
    padding: 0 40px;
    border-radius: 120px;
    background-color: rgba(229, 229, 229);
    border: 1px solid rgba(255, 255, 255, 1);
  }

  .success {
    color: #000;
    margin-top:20px;
    text-align: center;
    .icon {
      font-size: 50px;
      color: #3CFF2A;
      margin-bottom: 9px;
    }
  }
</style>